import { useState,useEffect } from 'react'
import './App.css'
import Home from './Home'
import User from './User';
import Detail from './Detail';
import Nofind from './Nofind';
import {Routes,Route,Link,useNavigate,Navigate } from 'react-router-dom'


function App() {
  // const navigate = useNavigate();
  // useEffect(()=> {
  //   setTimeout(()=> {
  //     // js 跳转 BOM 原始
  //     // window.location.href='/post/id=919614985602557';
  //     navigate('/post/id=919614985602557')
  //     // history.pushState(null,null,'/post/id=919614985602557')
  //   },2000)
  // },[])

  return (
    <div className="App">
      <nav>
        <Link to="/post?id=919614985602557">文章</Link>
        <Link to="/post/919614985602557">文章</Link>
        <Link to="/user">用户</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home/>}></Route>
        <Route path="/post" element={<Detail/>}></Route>
        <Route path="/post/:id" element={<Detail/>}></Route>
        <Route path="/user" element={<User/>}></Route>
        {/* 404 Page element */}
        <Route path="*" element={<Nofind/>}/>
        {/* 404 跳到指定页面 */}
        {/* <Route path="*" element={<Navigate to="/" replace={true}/>} /> */}
        
        {/* <Route path="/user/:id/posts" element={<UserPosts/>}></Route> */}
      </Routes>
    </div>
  )
}

export default App
